<template>
  <view class="p-3">
    <!-- #ifdef MP-WEIXIN -->
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <!-- #endif -->
    <view class="card">
      <image
        class="bgc"
        src="/static/images/merchant/wellet.svg"
        mode="aspectFill"
      ></image>
      <image class="headimg" :src="merchartShop.image" mode=""></image>
      <view class="left" @click="gopage('/pages/merchant/shopInfo/shopInfo')">
        <view class="one flex content-center">
          <view class="me-text-beyond" style="width: 440rpx">
            {{ merchartShop.name }}
          </view>
        </view>
        <view class="two flex content-center">
          <view class="flex content-center" style="margin-right: 20rpx">
            <span v-if="isShow">{{currentLanguageTexts.shopOpen}}</span>
            <span v-else>{{currentLanguageTexts.shopClose}}</span>
          </view>
          <view class="flex content-center">
            {{currentLanguageTexts.openTime}} {{ formatDateTime(merchartShop.startTime, 'hh:mm') }} -
            {{ formatDateTime(merchartShop.endTime, 'hh:mm') }}
          </view>
        </view>
        <view class="four flex flex-column">
          <view class="" style="margin-right: 20rpx">
            {{currentLanguageTexts.address}}：{{ merchartShop.addressMap + ' ' + merchartShop.address }}
          </view>
          <view class=""> {{currentLanguageTexts.tel}}：{{ merchartShop.mobile }} </view>
        </view>
      </view>
    </view>

    <view class="card_one">
      <view
        class="card_one_item flex content-center line"
        @click="gopage('/pages/components/pages/merchant/shopInfo')"
      >
        <image src="/static/images/merchant/myshop.svg" mode=""></image>
        <view class="text"> {{currentLanguageTexts.StoreInformation}} </view>
      </view>
      <view
        class="card_one_item flex content-center line"
        @click="gopage('/pages/components/pages/merchant/cashAccount')"
      >
        <image src="/static/images/merchant/myaccount.svg" mode=""></image>
        <view class="text"> {{currentLanguageTexts.Withdrawalaccount}} </view>
      </view>
      <view
        class="card_one_item flex content-center"
        @click="gopage('/pages/components/pages/merchant/withdrawal')"
      >
        <image src="/static/images/merchant/mywith.png" mode=""></image>
        <view class="text"> {{currentLanguageTexts.Withdrawaldetails}} </view>
      </view>
    </view>

    <uv-tabbar
      :value="value"
      @change="(index) => (value = index)"
      activeColor="#09b4f1"
    >
      <uv-tabbar-item
        :text="currentLanguageTexts.homePage"
        icon="home"
        @click="gopage('/pages/components/pages/merchant/index')"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.menuOrder"
        icon="order"
        @click="gopage('/pages/components/pages/merchant/order')"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.Desk"
        icon="bell"
        @click="gopage('/pages/components/pages/merchant/bell')"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.mine"
        icon="account"
        @click="gopage('/pages/components/pages/merchant/my')"
      ></uv-tabbar-item>
      <uv-tabbar-item
       :text="currentLanguageTexts.return"
        icon="arrow-leftward"
        @click="gopage2('/pages/index/index')"
      ></uv-tabbar-item>
    </uv-tabbar>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { getRevenue } from '@/api/merchant';
import { onLoad } from '@dcloudio/uni-app';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { formatDateTime } from '@/utils/util';
const main = useMainStore();
const { merchartShop, currentLanguageTexts } = storeToRefs(main);
const title = ref(currentLanguageTexts.value.mine);
const isShow = ref(true);
const value = ref(3);

const gopage = (url) => {
  uni.navigateTo({
    url,
  });
};

const getTime = () => {
  let date = new Date();
  let hour = date.getHours();

  let endHour = new Date(merchartShop.value.endTime).getHours();
  let startHour = new Date(merchartShop.value.startTime).getHours();

  if (merchartShop.value.status == 1) {
    if (hour >= startHour && hour <= endHour) {
      isShow.value = true;
    } else {
      isShow.value = false;
    }
  } else {
    isShow.value = false;
  }
};

getTime();
</script>

<style lang="scss">
.line {
  border-bottom: 1rpx solid #f3f3f3;
}

.card {
  position: relative;

  .bgc {
    width: 700rpx;
    height: 270rpx;
    border-radius: 20rpx;
  }

  .headimg {
    width: 124rpx;
    height: 124rpx;
    border-radius: 50%;
    position: absolute;
    top: 38rpx;
    left: 40rpx;
  }

  .left {
    position: absolute;
    top: 38rpx;
    left: 194rpx;

    .one {
      font-size: 40rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 56rpx;

      image {
        width: 42rpx;
        height: 42rpx;
        margin: 4rpx 0 0 10rpx;
      }
    }

    .two {
      font-size: 24rpx;
      color: #ffffff;
      margin: 16rpx 0;

      image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 6rpx;
      }
    }

    .three {
      margin: 20rpx 0;

      .three_item {
        width: 114rpx;
        height: 44rpx;
        background: #93dbff;
        border-radius: 4rpx;
        font-size: 24rpx;
        color: #0075af;
        text-align: center;
        line-height: 44rpx;
      }
    }

    .four {
      font-size: 24rpx;
      color: #ffffff;
    }
  }
}

.card_one {
  border-radius: 14rpx;
  width: 700rpx;
  background-color: #fff;
  padding: 0rpx 40rpx;
  box-sizing: border-box;
  margin: 40rpx 0;

  .card_one_item {
    height: 110rpx;
    line-height: 110rpx;
    display: flex;
    align-items: center;

    image {
      width: 50rpx;
      height: 50rpx;
      margin-right: 20rpx;
    }

    .text {
      font-size: 28rpx;
      color: #333333;
      line-height: 50rpx;
      font-weight: 600;
    }
  }
}
</style>
